<template>
  <div class="coupon_verification">
    <!--
    <div class="top">
      <div class="fixed">
      <span class="selected" >可使用(9)</span>
      <span>已使用(3)</span>
      <span>已过期(3)</span>
      </div>
    </div>
    -->
    <div class="center">
      <div class="qr">
        <qr
          :text="'xcq_' + $store.state.verification.couponId || ''"
          @downloadImg="downloadImg"
          name="二维码"
        >
          <div>{{ "" }} 兑换劵核销码<b></b></div>
          <div>
            此优惠券可用于：{{
              $store.state.verification.verificationName || "本油企适用"
            }}
          </div>
        </qr>
      </div>
    </div>
    <div class="bottom">
      <div>更多活动，请关注我们的公众号</div>
      <div>上海深斯能源科技有限公司提供技术支持</div>
    </div>
    <!-- {{$store.state.parse.issueId}} -->
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Qr from "@/components/QrCode";

export default {
  head() {
    return {
      title: "我的优惠券"
    };
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters({
      userInfo: "authen/userInfo"
    })
    // chargeList() {
    //   return this.allList.filter((ele) => {
    //     return ele.usageType === "+";
    //   });
    // },
    // payList() {
    //   return this.allList.filter((ele) => {
    //     return ele.usageType === "-";
    //   });
    // },
  },
  filters: {},
  components: {},
  created() {
    if (!this.$store.state.verification.couponId) {
      alert("此页面不直接开放");
      this.$router.replace({
        path: "/" + this.enterpriseId + "/coupon/"
      });
    }
    return;
  },
  components: {
    Qr: Qr
  },
  methods: {
    downloadImg() {
      console.log("~~~~");
    }
  }
};
</script>

<style lang="scss">
.coupon_verification {
  width: 7.5rem;
  background: #ffffff;
  padding: 0 0.3rem 0 0.3rem;
  box-sizing: border-box;
  min-height: 100vh;

  > .top {
    width: 6.9rem;
    height: 1rem;

    .fixed {
      position: fixed;
      top: 0;
      left: 0;
      width: 7.5rem;
      height: 1rem;
      padding: 0 0.3rem 0 0.3rem;
      box-sizing: border-box;
      background: #ffffff;
      display: flex;
      justify-content: space-around;
      align-items: center;
      span {
        height: 0.45rem;
        font-size: 0.32rem;
        font-weight: 400;
        color: #aaaaaa;
        line-height: 0.45rem;
        letter-spacing: 0.01rem;
      }
      span.selected {
        color: #111111;
      }
    }
  }
  > .center {
    .qr {
      margin-top: 10vh;
    }
  }
  > .bottom {
    margin-top: 0.8rem;
    margin-bottom: 0.3rem;
    text-align: center;
    font-size: 0.22rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.25);
    line-height: 0.32rem;
    letter-spacing: 1px;
  }
}
</style>
